<template>
  <div>
    <!-- <div class="tabs-wrapper" ref="tabs">
    <div class="tabs-item" :class="[`item${index}`]" v-for="(item, index) in getShowTab" @click="swiperChange({detail:{ current: index }})" :key="index">
      <div class="item-img-wrapper"><img :src="item.icon" style="width:100%;max-height:100%"/></div>
      <div>{{item.name}}</div>
    </div>
  </div> -->
    <div class="tabs-wrapper" ref="tabs" v-show="list.length >= 5">
      <div
        class="tabs-item"
        :class="{
          'item-left2': getShowTab[0] == index,
          'item-left1': getShowTab[1] == index,
          'item-current': getShowTab[2] == index,
          'item-right1': getShowTab[3] == index,
          'item-right2': getShowTab[4] == index,
          'has-animation':
            getShowTab[1] == index ||
            getShowTab[2] == index ||
            getShowTab[3] == index
        }"
        @click="swiperChangebyTag({ detail: { current: index } })"
        v-for="(item, index) in list"
        v-show="getShowTab.includes(index)"
        :key="index"
      >
        <div class="item-img-wrapper">
          <img
            :src="item.cover || nodatalogo"
            style="width:100%;max-height:100%"
          />
        </div>
        <div class="item-text" :style="`color:${fly_card_font_color || ''}`">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="tabs-wrapper2" v-show="list.length < 5">
      <div
        class="tabs-item"
        :class="{ on: current == index }"
        v-for="(item, index) in list"
        @click="swiperChangebyTag({ detail: { current: index } })"
        :key="index"
      >
        <div class="item-img-wrapper">
          <img
            :src="item.cover || nodatalogo"
            style="width:100%;max-height:100%"
          />
        </div>
        <div :style="`color:${fly_card_font_color || ''}`">
          {{ item.title }}
        </div>
      </div>
    </div>
    <swiper
      style="overflow:inherit"
      :current="current"
      class="swiper"
      :autoplay="false"
      @change="swiperChange"
      :circular="circular"
    >
      <swiper-item
        style="overflow:inherit"
        v-for="(o, index) in list"
        :key="index"
      >
        <div
          class="container"
          v-if="current + 1 >= index || current - 1 <= index"
        >
          <div class="card-wrapper" ref="cardwrapper">
            <Flycard
              v-if="listData.length > 0"
              :ref="`pile_${index}`"
              @loadingMore="loadMoreData"
              @getCurrent="setCurrent"
              dragDirection="vertical"
              :hasShadow="true"
              :data="listData"
              key="item_id"
            >
              <!-- :class="{ loading }" -->
            </Flycard>
            <div v-if="listData.length == 0 && !loading" class="empty">
              <image src="../../static/null.png" mode="widthFix"></image>
              <text>暂无数据</text>
            </div>
            <div
              :style="{
                width: '80%',
                height: coverStyle.height + 'px',
                display: current !== index || loading ? 'block' : 'none'
              }"
              class="card"
            >
              <!-- v-if="current !== index" -->
              <div class="card-loading">
                <image src="../../static/null.png" mode="widthFix"></image>
                <text>数据加载中</text>
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
 
  </div>
</template>
<script>
import Flycard from '@/components/card/ezflycard.vue'
let slider = require('./Slider.js')
export default {
  name: 'Tabs',
  components: {
    Flycard
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      loading: false,
      current: 0,
      touch: false,
      StartEvent: 'mousedown',
      MoveEvent: 'mousemove',
      EndEvent: 'mouseup',
      slider: null,
      circular: true, // 是否循环滑动
      page: 1,
      listData: [], // 卡片列表的数据
      currentCard: 0, // 默认显示第一条数据
      flyAnimation: false, // 飞卡动画
      noData: false, // 用来判断是否还有数据
      nextStatus: true,
      nodatalogo: require('../../static/3.png'),
      covers: [],
      coverStyle: {
        width: 0,
        height: 0
      },
      fly_card_font_color: '#ffffff',
    }
  },
  computed: {
    getShowTab() {
      let { current, list } = this
      let len = list.length
      let arr = [
        current - 2 >= 0 ? current - 2 : current - 2 + len,
        current - 1 >= 0 ? current - 1 : current - 1 + len,
        current,
        current + 1 < len ? current + 1 : current + 1 - len,
        current + 2 < len ? current + 2 : current + 2 - len
      ]
      return arr
    },

  },


  async mounted() {
   this.menuBind()
    await this.init()
  },
  methods: {
    async setCurrent(val) {
      this.currentCard = val
    },
    /**
     * @desc - 下拉刷新/初始化
     */
    async init() {
      this.nextStatus = true
      this.data = []
      await this.getList()
      if (this.data.length === 0) {
        this.noData = true
      } else {
        this.noData = false
      }
    },

    /**
     * @desc - 上拉加载
     */
    async loadMoreData() {
      if (this.nextStatus) {
        await this.getList(true)
      }
    },
    menuBind() {
      if (this.$refs.tabs) {
        new slider.Slider().load({
          dom: this.$refs.tabs,
          leftFn: () => {
            let { current, list } = this
            if (current + 1 >= list.length) {
              this.current = this.circular
                ? current + 1 - list.length
                : list.length - 1
            } else {
              this.current = current + 1
            }
          },
          rightFn: () => {
            let { current, list } = this
            if (current - 1 < 0) {
              this.current = this.circular ? current - 1 + list.length : 0
            } else {
              this.current = current - 1
            }
          }
        })
      }
    },

    loadingMore() {
      this.page += 1
      this.getList(true)
    },


    async swiperChange(e) {
      this.loading = true
      this.current = e.detail.current
      this.listData = []
      this.getList(true)
      this.currentCard = 0
      this.routerMinId = ''
    },
    swiperChangebyTag(e) {
      this.current = e.detail.current
    },
    async getList(isLoadingMore = false) {
      this.loading = true
	  let data =  [
    {
        "abstract": "飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介",
        "cover": "../../static/cover.jpg",
        "title": "飞卡标题飞卡标题飞卡标题飞卡标题",
    },
 {
     "abstract": "飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介",
     "cover": "../../static/cover.jpg",
     "title": "飞卡标题飞卡标题飞卡标题飞卡标题",
 }, {
        "abstract": "飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介",
        "cover": "../../static/cover.jpg",
        "title": "飞卡标题飞卡标题飞卡标题飞卡标题",
    }, {
        "abstract": "飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介飞卡简介",
        "cover": "../../static/cover.jpg",
        "title": "飞卡标题飞卡标题飞卡标题飞卡标题",
    },
];
this.listData = data;
      if (data.length > 0) {
        if (data.length < this.limit) {
          this.nextStatus = false
        }
      } else {
        this.nextStatus = false
      }
      if (!isLoadingMore) {
        this.setCurrent(0)
      }
      if (!isLoadingMore) {
        this.$nextTick(() => {
          this.list.forEach((item, index) => {
            if (this.$refs[`pile_${index}`] && this.$refs[`pile_${index}`][0])
              this.$refs[`pile_${index}`][0]?.init?.()
          })
        })
      }
    },


  }
}
</script>
<style lang="less" scoped>
@distance1: 66rpx;
@distance2: 20rpx;
@distance3: 200rpx;
.swiper {
  width: 750rpx;
  height: calc(1334rpx - 100rpx);
  box-sizing: border-box;
}
/deep/uni-swiper .uni-swiper-wrapper{
	height: 1300rpx;
	    overflow: inherit !important;
}
.play-btn {
  width: 106upx;
  height: 70upx;
  text-align: center;
  background: #fff;
  -webkit-box-shadow: 0 0 5upx 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5upx 0 rgba(0, 0, 0, 0.2);
  border-radius: 0 30upx 30upx 0;
  left: 0;
  position: absolute;
  bottom: 240upx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  img {
    width: 40upx;
    margin-left: -20upx;
  }
  .close_btn {
    position: absolute;
    width: 15upx !important;
    top: 30upx;
    right: 12upx;
  }
  .sk-wave {
    width: 50upx;
    height: 50upx;
    border-radius: 50%;
    text-align: center;
    font-size: 1em;
    background: linear-gradient(to right, #f59d5f, #d52915);
    margin-left: -20upx;
  }
  .sk-wave .sk-rect {
    background-color: #ffffff;
    height: 80%;
    width: 4upx;
    display: inline-block;
    margin: 10% 2upx;
    -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
    animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
  }
  .sk-wave .sk-rect-1 {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .sk-wave .sk-rect-2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .sk-wave .sk-rect-3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  .sk-wave .sk-rect-4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .sk-wave .sk-rect-5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

  @-webkit-keyframes sk-wave-stretch-delay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
    }
    20% {
      -webkit-transform: scaleY(0.75);
      transform: scaleY(0.75);
    }
  }

  @keyframes sk-wave-stretch-delay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
    }
    20% {
      -webkit-transform: scaleY(0.75);
      transform: scaleY(0.75);
    }
  }
}
.tabs-wrapper2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx 68rpx;
  text-align: center;
  height: @distance3;
  box-sizing: border-box;
  .tabs-item {
    color: #fff;
    font-size: 24rpx;
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-img-wrapper {
      width: 90rpx;
      height: 90rpx;
      transition: all 0.3s;
      margin-bottom: 10rpx;
      border-radius: 40%;
      overflow: hidden;
    }

    &.on {
      opacity: 1;
    }
  }
}
.tabs-wrapper {
  position: relative;
  height: @distance3;
  box-sizing: border-box;
  .tabs-item {
    position: absolute;
    top: 40rpx;
    left: 0;
    color: #fff;
    font-size: 24rpx;
    transform: translate3d(0, 0, 0);
    display: flex;
    align-items: center;
    flex-direction: column;
    .item-img-wrapper {
      width: 90rpx;
      height: 90rpx;
      margin-bottom: 10rpx;
      border-radius: 40%;
      overflow: hidden;
    }
    .item-text {
      width: 150rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    &.has-animation {
      transition: all 0.3s;
    }

    &.item-left2 {
      opacity: 0.3;
      transform: translate3d(10rpx, 0, 0) scale3d(0.7, 0.7, 0.7);
    }
    &.item-left1 {
      opacity: 0.6;

      transform: translate3d(140rpx, 0, 0) scale3d(0.88, 0.88, 0.88);
    }
    &.item-current {
      opacity: 1;
      transform: translate3d(300rpx, 0, 0);
    }
    &.item-right1 {
      opacity: 0.6;
      transform: translate3d(460rpx, 0, 0) scale3d(0.88, 0.88, 0.88);
    }
    &.item-right2 {
      opacity: 0.3;
      transform: translate3d(590rpx, 0, 0) scale3d(0.7, 0.7, 0.7);
    }
  }
}

@keyframes mymove {
  from {
  }
  to {
    transform: translate3d(-10rpx, -200%, 0);
  }
}

.operater {
  position: fixed;
  bottom: 40rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 80rpx @distance1 0;
  width: calc(100% - @distance1 * 2);
  z-index: 666;
  .like-btn {
    & > img {
      width: 96rpx;
      height: 96rpx;
    }
  }
  .voice-btn {
    & > image {
      width: 75rpx;
      height: 75rpx;
    }
  }
  .open-app {
    & a > img {
      width: 294rpx;
      height: 75rpx;
    }
  }
}
.crush {
  bottom: 80rpx;
}
.footer {
  position: fixed;
  bottom: 10rpx;
  width: 100%;
}
.container {
  position: relative;
  height: 100%;
  // padding: 0 @distance1;
  .card-wrapper {
    position: relative;
    min-height: 50vh;
    .empty {
      width: 100%;
      display: flex;
      min-height: 100vh;
      align-items: center;
      flex-direction: column;
      image {
        width: 120upx;
        padding-top: 150upx;
      }
      text {
        color: #999999;
        font-size: 30upx;
        line-height: 80upx;
      }
    }
    .card-loading {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: 0;
      image {
        width: 200upx;
        margin: 100upx 0;
      }
      text {
        color: #999999;
        font-size: 30upx;
        line-height: 80upx;
      }
    }
    .loading {
      position: relative;
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(255, 255, 255, 0);
        content: ' ';
      }
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 101;
        margin: auto;
        font-size: 28rpx;
        text-align: center;
        color: red;
        content: '加载中...';
      }
    }
    .card {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      background: #fff;
      border-radius: 20rpx;
      transition: box-shadow 0.3s ease-in-out,
        transform 0.3s cubic-bezier(0.18, 1.06, 0.57, 0.92);
    }
    .fly {
      // transform: translate3d(-10rpx, -200%, 0);
      animation: mymove 0.5s infinite forwards;
    }
  }
}
</style>
